<template>
  <div class="category">
    <!-- 搜索区域 -->
    <PageSearch @newSearchEvent="handlerSearch" :searchFormConfig="searchFormConfig"></PageSearch>
    <!-- 数据展示 -->
    <PageTable ref="pageTableRef" :page-tabel-config="pageTabelConfig" page-name="Category" @pageTableEvent="handlerDialog" @showEmptyDialog="handlerDialog" />
    <!-- 对话框 -->
    <PageDialog ref="pageDialogRef" :editDialogFormConfig="editDialogFormConfig" page-name="Category" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import PageTable from "@/components/page-table"
import { pageTabelConfig } from "./config/tabel.config"
import PageSearch from "@/components/page-search/src/page-search.vue"
import { searchFormConfig } from "./config/search.config"
import PageDialog from "@/components/page-dialog/src/page-dialog.vue"
import { editDialogFormConfig } from "./config/editDialog.config"

import { handlerDialog, pageDialogRef } from "@/hook/usePageDialog"
import { handlerSearch, pageTableRef } from "@/hook/usePageSearch"
export default defineComponent({
  name: "category",
  components: {
    PageTable,
    PageSearch,
    PageDialog,
  },
  setup() {
    return {
      pageTabelConfig,
      searchFormConfig,
      editDialogFormConfig,
      pageDialogRef,
      pageTableRef,
      handlerDialog,
      handlerSearch,
    }
  },
})
</script>

<style scoped></style>
